import React, { useState } from 'react';
import { useDispatch } from 'react-redux';
import { setBgColor } from '../../../store/index.ts';
import './Background.css';
import Bgphoto from './bg-photo';

function Background() {
  const colorOptions = ['red', 'green', 'blue', 'yellow', 'orange', '#ccc', 'plum', '#000', 'pink','white'];
  const dispatch = useDispatch();

  const onColorChange = (color) => {
    dispatch(setBgColor(color)); // 更新背景颜色到 Redux Store
    console.log(dispatch(setBgColor(color)))
  };

  const [activeTab, setActiveTab] = useState(0);
  const tabs = ['背景', '最近使用', '收藏'];
  const content = [<Bgphoto />, '最近使用', '收藏'];

  return (
    <div className='bg_box'> 
      <div className='bgbox-top'>
        <div className='bgbox-search'>
          <i className='iconfont icon-sousuo' />
          <input type="text" placeholder='搜索图片' />
        </div>
      </div>

      <div className='bgbox-color'>
        <div style={{ display: 'flex', marginBottom: '20px', flexWrap: 'wrap', alignItems: 'center' }}>
          <input 
            type="color" 
            onChange={(e) => onColorChange(e.target.value)} 
            style={{ width: '30px', height: '30px', marginRight: '10px', marginBottom: '10px', border: '1px solid #ccc' }} 
          />
          {colorOptions.map((color) => (
            <div
              key={color}
              onClick={() => onColorChange(color)}
              style={{
                width: '30px',
                height: '30px',
                backgroundColor: color,
                cursor: 'pointer',
                marginRight: '9px',
                marginBottom: '10px',
                border:'1px solid #ccc'
              }}
            />
          ))}
          <div style={{ width: '35px', height: '30px', marginRight: '10px', marginBottom: '10px', border: '1px solid #ccc', backgroundColor: '#ccc', textAlign: 'center' }}>
            更多
          </div>
        </div>
      </div>

      <div className='bg_tab'>
        <div className="bg-title">
          {tabs.map((tab, index) => (
            <div
              key={index}
              className={`tab ${activeTab === index ? 'active' : ''}`}
              onClick={() => setActiveTab(index)}
            >
              {tab}
            </div>
          ))}
        </div>
        <div className="bg-img">
          {content[activeTab]}
        </div>
      </div>
    </div>
  );
}

export default Background;